<template>
  <div class="info">
    <div class="nav">
      <van-nav-bar class="top">
        <template #title>
          <div class="title">个人信息</div>
        </template>
        <template #left>
          <div>
            <van-icon name="arrow-left" @click="goback" class="fanhui" />
          </div>
        </template>
        <template #right>
          <div class="save" @click="save">保存</div>
        </template>
      </van-nav-bar>
    </div>
    <div class="content">
      <van-cell-group class="myavatar">
        <van-cell title="头像" is-link @click="ifshow = true">
          <template #default>
            <img class="myimg" :src="photo" />
          </template>
        </van-cell>
        <van-overlay :show="ifshow" @click="ifshow = false">
          <div class="wrapper" @click.stop="ifshow = false">
            <div class="block">
              <div class="item">
                <van-uploader :after-read="afterRead">
                  从相册中选择
                </van-uploader>
              </div>
              <div class="item">拍照</div>
              <div class="item">取消</div>
            </div>
          </div>
        </van-overlay>
        <van-cell title="昵称" is-link :value="name" @click="ushow = true" />
        <van-popup v-model="ushow" position="bottom">
          <van-field v-model="name" placeholder="请输入用户名">
            <template #button>
              <van-button
                size="small"
                type="primary"
                @click="ushow = false"
                color="skyblue"
                >确定</van-button
              >
            </template>
          </van-field>
        </van-popup>

        <van-cell title="介绍" is-link :value="intro" @click="tshow = true" />
        <van-overlay :show="tshow" @click="tshow = false">
          <div class="wrapper" @click.stop="tshow = false">
            <div class="block" @click.stop>
              <van-field
                v-model="intro"
                autosize
                type="textarea"
                show-word-limit
              >
                <template #button>
                  <van-button
                    size="small"
                    type="primary"
                    @click="tshow = false"
                    color="skyblue"
                    class="jss"
                    >确定</van-button
                  >
                </template></van-field
              >
            </div>
          </div>
        </van-overlay>
        <van-cell title="性别" :value="gender" is-link @click="xshow = true" />
        <van-popup v-model="xshow" position="bottom">
          <div class="man" @click="sex">男</div>
          <div class="gril" @click="sex2">女</div>
        </van-popup>

        <van-cell
          is-link
          @click="showPopup"
          :value="birthday"
          title="生日"
        ></van-cell>
        <van-popup v-model="show" position="bottom" closeable @click="getDate">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="选择年月日"
            :min-date="minDate"
            :max-date="maxDate"
          >
            <template #default>
              <div class="wwuwu">请选择年月日</div>
            </template>
          </van-datetime-picker>
        </van-popup>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { getUserData, editApi } from '../../api/my.js'
export default {
  data () {
    return {
      gender: '',
      birthday: '',
      photo: '',
      name: '',
      show: false,
      intro: '',
      date: '',
      ifshow: false,
      ushow: false,
      tshow: false,
      xshow: false,
      // 日期
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2021, 0, 17)
    }
  },

  methods: {
    // 获取生日日期
    getDate () {
      // console.log(this.currentDate);
      const res = dayjs(this.currentDate).format('YYYY-MM-DD')
      this.birthday = res
    },
    showPopup () {
      this.show = true
    },
    // 选择性别
    sex () {
      this.xshow = false
      this.gender = '男'
    },
    sex2 () {
      this.xshow = false
      this.gender = '女'
    },

    // 上传头像
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    },

    // 点击外层关闭遮罩层
    close () {
      this.show = false
    },

    // 返回my页面
    goback () {
      this.$router.push('/my')
    },

    // 获取用户信息方法
    async getData () {
      const res = await getUserData()
      this.name = res.data.name
      if (res.data.gender === '1') {
        this.gender = '男'
      } else {
        this.gender = '女'
      }
      this.birthday = res.data.birthday
      this.photo = res.data.photo
    },
    // 保存编辑
    async save () {
      const res = await editApi(
        this.name,
        this.gender,
        this.birthday,
        this.intro
      )
      // 重新渲染数据
      this.getData()
      console.log(res)
    }
  },
  created () {
    // 渲染数据
    this.getData()
  }
}
</script>

<style lang="less" scoped>
.top {
  background-color: #3296fa;
  .title {
    color: white;
  }
}
.myimg {
  width: 40px;
  height: 40px;
}
.fanhui {
  color: #fff;
}
.save {
  color: #fff;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  margin: 0 30px;
  width: 100%;
  height: 150px;
  background-color: #fff;
  text-align: center;
  border-radius: 10px;
  .item {
    height: 50px;
    border-bottom: 1px solid #ccc;
    line-height: 50px;
    border-radius: 10px;
  }
}
.xuan {
  margin: 50px 90px 0;
}
.btn {
  background-color: skyblue;
  margin: 20px 30px;
}
.man {
  text-align: center;
  line-height: 35px;
  border-bottom: 1px solid #ccc;
  height: 35px;
}
.gril {
  text-align: center;
  line-height: 35px;
  height: 35px;
}
.jss {
  margin-top: 80px;
}
.wwuwu {
  font-size: 16px;
  margin-left: 38%;
}
</style>
